<template>
	<xn-form-container title="文件上传" :width="400" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-spin :spinning="uploadLoading">
			<a-upload-dragger
				ref="uploadRef"
				:before-upload="handleBeforeUpload"
				v-model:file-list="fileList"
				:show-upload-list="true"
				:headers="headers"
				accept=".xlsx, .xls, .csv"
				:auto-upload="false"
				multiple
			>
				<p class="ant-upload-drag-icon">
					<inbox-outlined />
				</p>
				<p>单击或拖动文件到此区域进行上传</p>
				<p>支持单个上传</p>
			</a-upload-dragger>
			<a-button type="link" @click="downloadTemplate">点击下载甲方还款数据上传模版</a-button>
		</a-spin>
		<a-divider />
		<a-form ref="formRef" :model="formData" :rules="formRules">
			<a-form-item label="所属公司" name="deptId">
				<DeptSelect v-model:value="formData.deptId" />
			</a-form-item>
			<a-form-item label="委托公司" name="companyCode">
				<CompanySelect v-model:value="formData.companyCode" />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-space>
				<a-button @click="onClose">关闭</a-button>
				<a-button type="primary" @click="handleSubmit" :disabled="!fileList.length" :loading="uploadLoading">
					上传
				</a-button>
			</a-space>
		</template>
	</xn-form-container>
</template>

<script setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { InboxOutlined } from '@ant-design/icons-vue'
	import CompanySelect from '@/components/Tjzy/Company/index.vue'
	import tool from '@/utils/tool'
	import fileApi from '@/api/tjzy/file/fileApi'
	import downloadUtil from '@/utils/downloadUtil'
	import clientRepaymentApi from '@/api/bi/repayment/client/clientRepaymentApi'
	import DeptSelect from '@/components/Tjzy/Dept/index.vue'
	import { required } from '@/utils/formRules'

	const emit = defineEmits(['success'])

	// 组件状态
	const visible = ref(false)
	const uploadLoading = ref(false)
	const fileList = ref([])
	const uploadRef = ref()
	// 表单数据
	const formData = ref({
		deptId: undefined,
		companyCode: undefined
	})
	const formRules = {
		deptId: [required('请选择所属公司')],
		companyCode: [required('请选择委托公司')]
	}
	// 请求头配置
	const headers = ref({
		token: tool.data.get('TOKEN')
	})

	// 打开上传弹窗
	const onOpen = () => {
		visible.value = true
	}

	// 关闭弹窗
	const onClose = () => {
		visible.value = false
	}
	// 阻止默认上传行为
	const handleBeforeUpload = () => false

	// 提交上传
	const handleSubmit = () => {
		if (!fileList.value.length) {
			message.warning('请选择要上传的文件')
			return
		}
		uploadLoading.value = true
		const fileData = new FormData()
		fileData.append('multipartFile', fileList.value[0].originFileObj)
		fileData.append('importBo', new Blob([JSON.stringify(formData.value)], { type: 'application/json' }))
		clientRepaymentApi
			.importExcel(fileData)
			.then((res) => {
				message.success('文件上传成功')
				emit('success')
			})
			.finally(() => {
				onClose()
				uploadLoading.value = false
			})
	}

	// 下载模板
	const downloadTemplate = async () => {
		try {
			const res = await fileApi.downloadWithBucket('gzx-excel-template', '甲方还款数据上传模版.xlsx')
			downloadUtil.resultDownload(res)
		} catch (error) {
			console.error('模板下载失败:', error)
			message.error('模板下载失败')
		}
	}

	defineExpose({ onOpen })
</script>
